<template>
  <div>
    <div id="main" ref="mybox" style="height: 96vh;width: 100%;"></div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import Component, {namespace, Getter} from 'class-component'
  import ECharts from 'echarts'
  import axios from 'axios'
  import provinceNameDesc from './province'

  const ScreenMapDataGetter = namespace('screenMapData', Getter)

  @Component({
    props: {
      mapData: {
        type: Object
      },
      dateTime: {
        type: String,
        default: () => ''
      }
    },
    watch: {
      'mapData': function () {
        let self = this
        // let sortData = this.mapData
        this.mapData.highRank.forEach(function (value, index, array) {
          let temp = {
            name: value.name,
            value: [value.longitude, value.latitude]
          }
          self.tempData.push(temp)
        })
        this.mapData.lowRank.forEach(function (value, index, array) {
          let temp = {
            name: value.name,
            value: [value.longitude, value.latitude]
          }
          self.tempData2.push(temp)
        })
        this.setOptions('china')
      }
    }
  })
  export default class Map2dSimple extends Vue {
    @ScreenMapDataGetter autoTimer
    tempData = []
    tempData2 = []
    temp = []
    testChart = null
    provinces = []
    setOptions (mapName) {
      this.testChart.setOption({
        backgroundColor: '#3A3A3A',
        title: {
          show: false,
          text: this.$props.dateTime + '全国影城票房分布',
          left: 'center',
          textStyle: {
            color: '#fff'
          },
          z: 8,
          zlevel: 8
        },
        tooltip: {
          show: false,
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          y: 'bottom',
          x: 'right',
          data: ['热度'],
          textStyle: {
            color: '#fff'
          }
        },
        geo: {
          map: mapName,
          zoom: 1.2,
          label: {
            normal: {
              show: true,
              position: 'left',
              distance: '10',
              offset: [30, 40],
              fontSize: 16,
              fontWeight: '0',
              color: '#FFF',
              z: 8,
              zlevel: 8
            },
            emphasis: {
              show: true,
              position: 'left',
              distance: '10',
              offset: [30, 40],
              fontSize: 16,
              fontWeight: '0',
              color: '#FFF',
              z: 8,
              zlevel: 8
            }
          },
          roam: true,
          scaleLimit: {
            min: 1,
            max: 3
          },
          nameMap: {
            'China': '中国',
            '广东': '广东省',
            '浙江': '浙江省',
            '江苏': '江苏省',
            '上海': '上海市',
            '北京': '北京市',
            '四川': '四川省',
            '湖北': '湖北省',
            '山东': '山东省',
            '福建': '福建省',
            '河南': '河南省',
            '湖南': '湖南省',
            '安徽': '安徽省',
            '广西': '广西壮族自治区',
            '河北': '河北省',
            '重庆': '重庆市',
            '陕西': '陕西省',
            '江西': '江西省',
            '云南': '云南省',
            '天津': '天津市',
            '黑龙江': '黑龙江省',
            '吉林': '吉林省',
            '山西': '山西省',
            '贵州': '贵州省',
            '海南': '海南省',
            '内蒙古': '内蒙古自治区',
            '甘肃': '甘肃省',
            '宁夏': '宁夏回族自治区',
            '青海': '青海省',
            '辽宁': '辽宁省',
            '新疆': '新疆维吾尔自治区',
            '西藏': '西藏自治区'
          },
          itemStyle: {
            normal: {
              areaColor: '#323c48',
              borderColor: '#111'
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          }
        },
        series: [
          /*
          {
            name: 'top',
            type: 'scatterGL',
            coordinateSystem: 'geo',
            symbolSize: 6,
            itemStyle: {
              shadowBlur: 2,
              shadowColor: 'rgba(14, 241, 242, 0.8)',
              color: 'rgba(14, 241, 242, 0.8)'
            },
            data: this.tempData
          },
          */
          {
            name: 'top',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: 4,
            z: 4,
            zlevel: 4,
            itemStyle: {
              normal: {
                show: false,
                color: 'rgba(14, 241, 242, 0.8)'
              },
              emphasis: {
                shadowBlur: 2,
                shadowColor: 'rgba(14, 241, 242, 0.8)',
                color: 'rgba(14, 241, 242, 0.8)'
              }
            },
            rippleEffect: {
              period: 5,
              scale: 5,
              brushType: 'fill'
            },
            data: this.tempData
          },
          {
            name: 'other',
            type: 'scatterGL',
            coordinateSystem: 'geo',
            zlevel: 6,
            z: 6,
            symbolSize: 2,
            itemStyle: {
              shadowBlur: 2,
              shadowColor: 'rgba(37, 140, 249, 0.8)',
              color: 'rgba(37, 140, 249, 0.8)'
            },
            data: this.tempData2
          }
        ]
      })
      this.testChart.hideLoading()
    }
    mounted () {
      let self = this
      require('echarts-gl')
      require('echarts/map/js/china')
      this.testChart = ECharts.init(this.$refs.mybox)
      this.testChart.showLoading('default', {
        text: '请稍后...',
        color: '#c23531',
        textColor: '#FFF',
        maskColor: 'rgb(58, 58, 58)',
        zlevel: 0
      }) // 当前没数据显示加载动画
      axios.get('/api/dimension/provinces').then((res) => {
        if (res.data.success) {
          self.provinces = res.data.data
        }
      })
      this.testChart.on('click', function (result) {
        if (result.name === '南海诸岛') {
          self.$message('南海诸岛占时不能提供数据!')
          return
        }
        if (self.autoTimer !== null) {
          clearInterval(self.autoTimer)
        }
        let temp = self.provinces.find(function (value, index, arr) {
          return value.name === result.name
        })
        let num = 0
        let temp2 = provinceNameDesc.find(function (value, index, arr) {
          if (value.name === result.name) {
            num = index
            return true
          } else {
            return false
          }
        })
        self.testChart.dispose()
        self.$router.push({path: '/chart/spreadMap', query: {provinceKey: num, provinceCode: temp.code, provinceName: temp2.desc}})
      })
    }
  }
</script>
